<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">播出流监控</h1>
</div>
<div class="wrapper-md">
<div class="row">

 <div class="col-sm-2" >
   <!-- 左边菜单-->
   <div style=" overflow-y:auto; overflow-x:auto;  height:600px;">
     <ul id="treeDemo" class="ztree"></ul>
</div>

 </div>

 <div class="col-sm-10">
  <div class="panel panel-default">
    <div class="panel-heading">
      播出流监控
    </div>
    <div  ng-controller="dataTablesCtrl">

      <table id="myTable" class="table table-striped m-b-none">
      </table>


    
    </div>
  </div>
  </div>

  </div>

</div>


<!--样式-->
<style type="text/css">  
    div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}  
    div#rMenu a{  
        cursor: pointer;  
        list-style: none outside none;  
    }  

.selected {
  background-color: #DFF0D8;
}
  
/* dataTables列内容居中 */
.table>tbody>tr>td{
        text-align:center;
}

/* dataTables表头居中 */
.table>thead:first-child>tr:first-child>th{
        text-align:center;
}
</style>
<!--样式-->

<!--右键菜单-->
<nav ui-nav class="navi" ng-include="'src/app/StreamStatus/ztree_edit.html'"></nav>

<script type="text/javascript">

//angularjs总控制器
app.controller('dataTablesCtrl', function($scope, $http,$state) {
//进入编辑页面
   $scope.goEdit = function () {
  var optIds = $('#optIds').val();
     if(''==optIds){
    top.layer.msg('请至少选择一项', {icon: 6});
       return false;
  }
  if(optIds.indexOf(",") != -1){
    top.layer.msg('编辑只能选择一项', {icon: 6});
    return false;
  }
        $state.go('app.movie.programEdit', {infoId: optIds});
    };



//进入编辑页面
   $scope.goRemove = function () {
  var optIds = $('#optIds').val();
     if(''==optIds){
    top.layer.msg('请至少选择一项', {icon: 6});
       return false;
    }

    top.layer.confirm('您确定删除这些信息吗', function(index){
    $.ajax({
      url : 'program/updateDisplay.do',
      type : 'post',
      data : {
        ids:optIds
      },
      cache : false,
      success : function(data) {
        top.layer.msg('操作成功', {icon: 6});
      }
    });
    top.layer.close(index);
  });
    };
});


function checkOne(){
  var optIds = '';
  $("input[name='ids']:checkbox:checked").each(function(){ 
      optIds+=$(this).val() +',';
       });
   if(''!=optIds){
        optIds = optIds.substring(0,optIds.length-1);
      }
$('#optIds').val(optIds);

  console.log($('#optIds').val());
}


var dtUrl =  API_URL+"stream_status?query=delflag:0";

    $(document).ready(function(){


 //初始化dataTable
     var table =  $('#myTable').DataTable({
    ajax: {
        url: dtUrl,  
          success:function(json){
            //清空表格
            $('#myTable').dataTable().fnClearTable();  
            if(null==json){
              $('#myTable').dataTable().fnClearTable();  
             }else{
               $('#myTable').dataTable().fnAddData(json,true);  //刷下表格
             }  
          }
        },
         deferRender:true,
         Processing:true,

          buttons: [
        {
            extend: 'collection',
            text: 'Export',
            buttons: [ 'csv-flash', 'xls-flash', 'pdf-flash' ]
        }
    ],
            //默认最后一列（最后更新时间）降序排列
            order: [[3, "desc"]],
         
            //行创建完成后回调
            rowCallback: function (row, data, index) {
               
            },
                    aoColumns: [
                    { data : "Id",
                    title: "<input type='checkbox' id='allChecked' name='allChecked' />",
                  orderable: false , 
              render : function(data, type, full, meta) {
            return '<input type="checkbox" value="'+ data + '" name="ids" onclick="checkOne()"/>';
           }},
         { data: "Id",
            title: "ID"
          },
         { data: "ServerId" ,
            title: "服务器ID"
       },
            { data: "StreamId"  ,
              title: "流名ID" },
         
         { data: "VideoWidth" ,
           title: "视屏宽度<br>(单位:像素)"
                  },
         { data: "VideoHeight" ,
            title: "视屏高度<br>(单位:像素)"
                  },
          { data: "SignalDar" ,
            title: "信号源显示比例"
                  },
          { data: "VideoBitRate" ,
            title: "视屏流比特率<br>(单位:bps)"
                  },
          { data: "AudioBitRate" ,
            title: "音频流比特率<br>(单位:bps)"
                  },
         { data: "StreamStatus" ,
           title: "状态",
                    render: function (data, type, row, meta) {
                        if(row.StreamStatus==0){
                          return "<i style='color:#2e8ded;' title='启用' class='fa fa-spinner fa-spin'></i>"; 
                      }else{
                        return "<i  title='停用' class='fa fa-spinner'></i>";
                      }
                    }},
                                       
     ],
           
     drawCallback: function( settings ) {
         

           },


           initComplete:function(data){
            
           // 刷新表格数据，分页信息不会重置
            setInterval( function () {

                  table.ajax.reload( null, false ); 
                  }, 10000 );//10秒刷新一次

//选中行
 $('#myTable tbody').on( 'click', 'tr', function () {
          
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
        
    } );

//全选、反选
$('#allChecked').on('click' , function(){
  var boxes = document.getElementsByName("ids");
    for(i=0;i<boxes.length;i++){
                boxes[i].checked = this.checked;
    }
    var optIds ='';
    if(this.checked){
      $("input[name='ids']:checkbox:checked").each(function(){ 
      optIds+=$(this).val() +',';
       });
    }else{
  optIds='';
      }
      if(''!=optIds){
        optIds = optIds.substring(0,optIds.length-1);
      }
      $('#optIds').val(optIds);
});
           },
            Paginate: true, 
           language:{
               url: 'vendor/jquery/datatables/Chinese.json'
          }
    });
});  

</script>









